<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日一笑</title>
    <style>
        /* 基本页面样式 */
        body {
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-image: url('http://img5.adesk.com/6705658fe7bce715f8a207b3?sign=9315e3c34649baa1fa2660ea48067f74&t=676e23be'); /* 背景图 */            background-size: cover;
            background-repeat: no-repeat; /* 禁止背景图重复 */
            background-position: center;
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100vh;
        }

        /* 标题样式 */
        h1 {
            font-size: 2.5rem;
            margin: 0;
            padding: 20px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        }

        /* 内容显示区域 */
        #content {
            margin: 20px;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            min-height: 100px;
            font-size: 1.2rem;
            line-height: 1.6;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
            word-wrap: break-word;
        }

        /* 按钮样式 */
        button {
            background-color: #f3db6f;
            border: none;
            padding: 15px 25px;
            font-size: 1.2rem;
            color: white;
            border-radius: 50px;
            cursor: pointer;
            margin-top: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #ffd13b;
        }
         /* 链接按钮样式 */
        a.button-link {
            background-color: #ffe561;
            padding: 3px 15px;
            font-size: 0.6rem;
            color: white;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: background-color 0.3s;
        }

        a.button-link:hover {
            background-color: #ffcb3b;
        }

         /* 链接按钮容器样式 */
        .link-buttons-container {
            position: absolute;
            bottom: 20px;   /* 距离底部20px */
            right: 20px;    /* 距离右边20px */
            display: flex;
            flex-direction: column;
            gap: 10px;

        }
         /* 页脚样式 */
         .footer {
            width: auto;
            position: absolute;
            bottom: 0;
            width: 100%;
            color: white;
            padding: 0px 0;
            text-align: center;
        }

          /* 滚动动画：从右到左 */
          @keyframes scrollFooter {
            0% {
                transform: translateX(100%); /* 从右侧开始 */
            }
            100% {
                transform: translateX(-100%); /* 滚动到左侧 */
            }
        }
        .footer-item {
            width: auto;
            /* background-color: rgba(0, 0, 0, 0.6); */
            padding: 2px 5px;
            color: white;
            font-size: 0.3rem;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            height: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
            bottom: 0;
        }
                /* 页脚中的瀑布流 */
        .footer-masonry {
            width: auto;
            display: flex;
            flex-wrap: nowrap;  /* 不换行 */
            gap: 10px;
            width: 100%;
            height: 10px;
            overflow: hidden;
            position: relative;
            animation: scrollFooter 15s linear infinite; /* 滚动动画 */
            bottom: 0;
        }

        /* 小屏幕适配 */
        @media (max-width: 600px) {
            h1 {
                font-size: 2rem;
            }

            #content {
                font-size: 1rem;
            }

            button {
                padding: 12px 20px;
                font-size: 1rem;
            }
        }
          /* 页面居中的加载动画样式 */
          #loading {
            display: none; /* 默认隐藏 */
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            border: 5px solid #f3f3f3; /* 背景颜色 */
            border-top: 5px solid #3498db; /* 动画的颜色 */
            border-radius: 50%;
            animation: spin 1s linear infinite; /* 旋转动画 */
        }

        /* 旋转动画 */
        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

    </style>
</head>
<body>
    <h1>每日一笑</h1>
    <div id="content">点击按钮获取笑话...</div>
    <button onclick="fetchDogStory()">获取笑话</button>
    <div class="link-buttons-container">
        <a href="舔狗日记.html" class="button-link">舔狗日记</a>
    </div>

     <!-- 加载标识 -->
     <div id="loading"></div>

     <!-- 页脚部分 -->
     <div class="footer">
        <div class="footer-masonry" id="footer-masonry">
            <!-- 动态添加的页脚项 -->
        </div>
    </div>

    <script>
      function fetchDogStory() {

           // 显示加载标识
          document.getElementById('loading').style.display = 'block';
          document.getElementById('content').textContent = '';  // 清空当前内容

          const proxyUrl = 'https://api.allorigins.win/get?url=';
          const targetUrl = 'http://zj.v.api.aa1.cn/api/wenan-gaoxiao/?type=json';
          const timestamp = new Date().getTime(); // 添加时间戳，避免缓存

          fetch(proxyUrl + encodeURIComponent(targetUrl + '&timestamp=' + timestamp))
              .then(response => response.json())
              .then(data => {
                  // 隐藏加载标识
                  document.getElementById('loading').style.display = 'none';
                  if (data.contents) {
                      const parsedData = JSON.parse(data.contents);
                          const story = parsedData.msg;
                        document.getElementById('content').textContent = '';
                        typeWriter(story, 'content', 100);  // 每个字显示的速度为100毫秒
                  } else {
                      document.getElementById('content').textContent = "请求失败，请稍后重试！";
                  }
              })
              .catch(error => {
                  document.getElementById('content').textContent = "请求失败，请检查网络连接！";
                  console.error('请求失败:', error);
              });
      }
          // 逐字显示函数
    function typeWriter(text, elementId, speed) {
        let i = 0;
        const element = document.getElementById(elementId);

        function addCharacter() {
            if (i < text.length) {
                element.textContent += text.charAt(i);
                i++;
                setTimeout(addCharacter, speed); // 设置每个字符的显示间隔
            }
        }

        addCharacter();
    }
      // 模拟数据源
      const footerItems = [
            "作者：童林财，微信联系方式：tonglingcaiwx"
        ];

     // 动态加载页脚内容
     function loadFooterItems() {
            const footerContainer = document.getElementById('footer-masonry');
            footerItems.forEach(item => {
                const footerItem = document.createElement('div');
                footerItem.classList.add('footer-item');
                footerItem.textContent = item;
                footerContainer.appendChild(footerItem);
            });
             
        }
     
        // 初始化加载页脚内容
        window.onload = function() {
            loadFooterItems();
        };

    </script>
</body>
</html>
